웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
CSS 스타일 속성 중에서 사용하면 매우 유용하지만 예전에는 잘 사용하지 않던 속성 중 하나인 clip-path에 대하여 알아봅니다. 예전에는 브라우저 지원 관련하여 잘 사용되지 않았습니다. 하지만 최근의 메이저 브라우저는 clip-path의 경우 대부분 지원하죠. 다만 clip 속성의 경우 Deprecated되었으니 clip-path로 대체하여 사용하는 것이 좋습니다.
CSS 속성 clip-path는 대상이 되는 엘리먼트에 사용하여 circle, ellipsis, polygon(다각형) 등의 원하는 영역만 가위로 자른 것처럼 보여줄 수 있습니다. 쉽게 얘기해 네모난 모양의 엘리먼트를 원이나 별 모양으로 보여줄 수도 있고 아니면 자동차 처럼 만드는 것 역시 가능합니다.
참고로 '잘라서 보여준다'라고 적은 이유가 있는데 pointer: cursor; 등의 값으로 해당 영역의 마우스 커서를 변경했을 때 실제로 잘라낸 부분은 커서 변경 등의 스타일이 적용되지 않기 때문입니다. 이점 참고 하시기 바랍니다.
다음으로 먼저 간단한 문법입니다.
clip-path: circle(value);
// value : 반지름
clip-path: ellipsis(value, value);
clip-path: polygon(value value, ...);
보시는 것처럼 문법은 매우 간단합니다. 지원하는 circle(), ellipsis(), polygon()를 정하고 내부에 값만 선언하면 됩니다. 그럼 아래에서는 몇 가지 예제를 만들어보고 더 자세히 알아보겠습니다.
아래는 몇 가지 예제를 만들어보고 실제로 구현된 모습이 어떻게 나타나게 되는지 알아보려고 합니다. 가장 먼저 원과 타원 그리고 다각형 형태를 css clip-pat를 사용하여 만들어보겠습니다.
@ 원 만들기, circle
가장 먼저 원 모양으로 잘라 만드는 방법을 알아보겠습니다. 공통적으로 test-path 클래스 이름의 태그를 만들고 여기에 원하는 도형을 만드는 예제입니다. 아래는 원을 만들겠습니다.
이제 원을 만들기 위해서 아래와 같이 스타일 속성을 적용해봅니다. 위에는 공통으로 적용될 속성이고 아래는 원, 타원, 다각형 구분을 위해 적용할 스타일입니다.
위 예제를 구현하여 각각 반지름 100px, 50px, 25px 크기의 원을 만들면 아래와 같이 나타나게 됩니다.
각각의 원을 만들 수 있었습니다. 다음은 타원을 만들어봅니다.
@ 타원 만들기, eclipse
타원 역시 위 예제와 비슷합니다. 타원의 경우 상하 좌우의 길이를 전달해야 합니다. 아래와 같이 css를 적용합니다.
이제 위 예제를 구현하면 아래와 같이 타원이 각각 나타납니다.
타원의 경우 보시는 것처럼 원과 비슷하게 동작하고 구현 가능합니다. 이제 마지막으로 다각형 polygon을 사용하여 만들어봅니다.
@ 다각형 만들기
다각형을 만들기 위해서는 polygon을 사용하며 각각의 값에 콤마를 사용합니다. 각각의 콤마를 연결하여 도형을 만들다고 생각하시면 되며 순서대로 연결되므로 순서도 영향을 미칠 수 있음을 주의하시기 바랍니다. 그럼 아래에서 몇 가지 도형을 먼저 만들어보겠습니다.
가장 먼저 삼각형 도형을 만들어봅니다.
위 코드를 구현하면 아래와 같습니다.
다음은 마름모 도형을 만들어보겠습니다.
이를 구현하면 아래와 같이 나타나게 됩니다.
마름모 역시 간단하게 구현할 수 있었습니다.
여기까지 clip-path 속성을 사용한 몇 가지 예제도 함께 알아보았습니다. 이처럼 clip-path를 사용하면 간단한 도형들을 손쉽게 구현할 수 있다는 장점이 있습니다. 기타 주의할 점은 위에도 말했지만 clip-path가 적용된 부분은 클릭 영역 포함되고 텍스트가 포함된 경우 동일하게 잘려서 나타납니다.
# css clip-path 알아보기
CSS 속성 clip-path는 대상이 되는 엘리먼트에 사용하여 circle, ellipsis, polygon(다각형) 등의 원하는 영역만 가위로 자른 것처럼 보여줄 수 있습니다. 쉽게 얘기해 네모난 모양의 엘리먼트를 원이나 별 모양으로 보여줄 수도 있고 아니면 자동차 처럼 만드는 것 역시 가능합니다.
"clip-path를 사용하여 원, 타원, 다각형 영역을 쉽게 구현 가능"
참고로 '잘라서 보여준다'라고 적은 이유가 있는데 pointer: cursor; 등의 값으로 해당 영역의 마우스 커서를 변경했을 때 실제로 잘라낸 부분은 커서 변경 등의 스타일이 적용되지 않기 때문입니다. 이점 참고 하시기 바랍니다.
다음으로 먼저 간단한 문법입니다.
clip-path: circle(value);
// value : 반지름
clip-path: ellipsis(value, value);
clip-path: polygon(value value, ...);
보시는 것처럼 문법은 매우 간단합니다. 지원하는 circle(), ellipsis(), polygon()를 정하고 내부에 값만 선언하면 됩니다. 그럼 아래에서는 몇 가지 예제를 만들어보고 더 자세히 알아보겠습니다.
! clip-path 예제보기
아래는 몇 가지 예제를 만들어보고 실제로 구현된 모습이 어떻게 나타나게 되는지 알아보려고 합니다. 가장 먼저 원과 타원 그리고 다각형 형태를 css clip-pat를 사용하여 만들어보겠습니다.
@ 원 만들기, circle
가장 먼저 원 모양으로 잘라 만드는 방법을 알아보겠습니다. 공통적으로 test-path 클래스 이름의 태그를 만들고 여기에 원하는 도형을 만드는 예제입니다. 아래는 원을 만들겠습니다.
<div class="test-path test-path-circle">
clip-path : Circle
</div>
clip-path : Circle
</div>
이제 원을 만들기 위해서 아래와 같이 스타일 속성을 적용해봅니다. 위에는 공통으로 적용될 속성이고 아래는 원, 타원, 다각형 구분을 위해 적용할 스타일입니다.
.test-path {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
font-weight: bold;
background: #ff7777;
}
.test-path-circle {
clip-path: circle(100px);
}
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
font-weight: bold;
background: #ff7777;
}
.test-path-circle {
clip-path: circle(100px);
}
위 예제를 구현하여 각각 반지름 100px, 50px, 25px 크기의 원을 만들면 아래와 같이 나타나게 됩니다.
<div class="test-path test-path-circle-1">
clip-path : Circle
</div>
<div class="test-path test-path-circle-2">
clip-path : Circle
</div>
<div class="test-path test-path-circle-3">
clip-path : Circle
</div>
<style>
.test-path {
width: 200px;
height: 200px;
clip-path: circle(100px);
background: #ff7777;
text-align: center;
line-height: 200px;
font-weight: bold;
}
.test-path-circle-1 {
clip-path: circle(100px);
}
.test-path-circle-2 {
clip-path: circle(50px);
}
.test-path-circle-3 {
clip-path: circle(25px);
}
</style>
clip-path : Circle
</div>
<div class="test-path test-path-circle-2">
clip-path : Circle
</div>
<div class="test-path test-path-circle-3">
clip-path : Circle
</div>
<style>
.test-path {
width: 200px;
height: 200px;
clip-path: circle(100px);
background: #ff7777;
text-align: center;
line-height: 200px;
font-weight: bold;
}
.test-path-circle-1 {
clip-path: circle(100px);
}
.test-path-circle-2 {
clip-path: circle(50px);
}
.test-path-circle-3 {
clip-path: circle(25px);
}
</style>
각각의 원을 만들 수 있었습니다. 다음은 타원을 만들어봅니다.
@ 타원 만들기, eclipse
타원 역시 위 예제와 비슷합니다. 타원의 경우 상하 좌우의 길이를 전달해야 합니다. 아래와 같이 css를 적용합니다.
.test-path-ellipse {
width: 200px;
height: 200px;
clip-path: ellipse(100px 50px);
}
width: 200px;
height: 200px;
clip-path: ellipse(100px 50px);
}
이제 위 예제를 구현하면 아래와 같이 타원이 각각 나타납니다.
<div class="test-path-ellipse test-path-ellipse-1">
ellipse(100px 50px)
</div>
<div class="test-path-ellipse test-path-ellipse-2">
ellipse(50px 100px)
</div>
<style>
.test-path-ellipse {
width: 200px;
height: 200px;
clip-path: circle(100px);
background: #77c7ff;
text-align: center;
line-height: 200px;
font-weight: bold;
}
.test-path-ellipse-1 {
clip-path: ellipse(100px 50px);
}
.test-path-ellipse-2 {
clip-path: ellipse(50px 100px);
}
</style>
ellipse(100px 50px)
</div>
<div class="test-path-ellipse test-path-ellipse-2">
ellipse(50px 100px)
</div>
<style>
.test-path-ellipse {
width: 200px;
height: 200px;
clip-path: circle(100px);
background: #77c7ff;
text-align: center;
line-height: 200px;
font-weight: bold;
}
.test-path-ellipse-1 {
clip-path: ellipse(100px 50px);
}
.test-path-ellipse-2 {
clip-path: ellipse(50px 100px);
}
</style>
타원의 경우 보시는 것처럼 원과 비슷하게 동작하고 구현 가능합니다. 이제 마지막으로 다각형 polygon을 사용하여 만들어봅니다.
@ 다각형 만들기
다각형을 만들기 위해서는 polygon을 사용하며 각각의 값에 콤마를 사용합니다. 각각의 콤마를 연결하여 도형을 만들다고 생각하시면 되며 순서대로 연결되므로 순서도 영향을 미칠 수 있음을 주의하시기 바랍니다. 그럼 아래에서 몇 가지 도형을 먼저 만들어보겠습니다.
가장 먼저 삼각형 도형을 만들어봅니다.
.test-path-polygon-1 {
clip-path: polygon(100px 0px, 200px 200px, 0 200px);
}
clip-path: polygon(100px 0px, 200px 200px, 0 200px);
}
위 코드를 구현하면 아래와 같습니다.
<div class="test-path-polygon test-path-polygon-1">
polygon(100px 0px, 200px 200px, 0 200px)
</div>
<style>
.test-path-polygon {
width: 200px;
height: 200px;
background: green;
text-align: center;
line-height: 200px;
font-weight: bold;
}
.test-path-polygon-1 {
clip-path: polygon(100px 0px, 200px 200px, 0 200px);
}
</style>
polygon(100px 0px, 200px 200px, 0 200px)
</div>
<style>
.test-path-polygon {
width: 200px;
height: 200px;
background: green;
text-align: center;
line-height: 200px;
font-weight: bold;
}
.test-path-polygon-1 {
clip-path: polygon(100px 0px, 200px 200px, 0 200px);
}
</style>
다음은 마름모 도형을 만들어보겠습니다.
.test-path-polygon-2 {
clip-path: polygon(100px 0px, 200px 100px, 100px 200px, 0 100px);
}
clip-path: polygon(100px 0px, 200px 100px, 100px 200px, 0 100px);
}
이를 구현하면 아래와 같이 나타나게 됩니다.
<div class="test-path-polygon test-path-polygon-2">
polygon(100px 0px, 200px 100px, 100px 200px, 0 100px)
</div>
<style>
.test-path-polygon {
width: 200px;
height: 200px;
background: green;
text-align: center;
line-height: 200px;
font-weight: bold;
}
.test-path-polygon-2 {
clip-path: polygon(100px 0px, 200px 100px, 100px 200px, 0 100px);
}
</style>
polygon(100px 0px, 200px 100px, 100px 200px, 0 100px)
</div>
<style>
.test-path-polygon {
width: 200px;
height: 200px;
background: green;
text-align: center;
line-height: 200px;
font-weight: bold;
}
.test-path-polygon-2 {
clip-path: polygon(100px 0px, 200px 100px, 100px 200px, 0 100px);
}
</style>
마름모 역시 간단하게 구현할 수 있었습니다.
여기까지 clip-path 속성을 사용한 몇 가지 예제도 함께 알아보았습니다. 이처럼 clip-path를 사용하면 간단한 도형들을 손쉽게 구현할 수 있다는 장점이 있습니다. 기타 주의할 점은 위에도 말했지만 clip-path가 적용된 부분은 클릭 영역 포함되고 텍스트가 포함된 경우 동일하게 잘려서 나타납니다.
아래의 글도 찾고 계시지 않나요?
